<template>
    <el-card class="coupon">
        <div class="clearfix">
            <span>优惠券专区---限时秒杀</span>
        </div>
        <div class="content" v-loading="loading">
            <div class="item" v-for="item, index in couponList" :key="index">
                <div class="time">
                    <div>
                        开始时间：{{ item.beginTime }}
                    </div>
                    <div>
                        结束时间：{{ item.endTime }}
                    </div>
                </div>
                <div class="redbag">
                    <div>{{ item.name }}</div>
                    <div class="desc">剩余：{{ item.stock }}份</div>
                </div>
                <div class="btn">
                    <el-button size="small" type="danger" @click="submit(item.id)">立即抢购</el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
import { reqCouponList, reqCouponPost } from '@/api/coupon'

export default {
    name: 'coupon',
    data() {
        return {
            loading: false,
            couponList: []
        }
    },
    mounted() {
        this.getCouponList()
    },
    methods: {
        getCouponList() {
            this.loading = true;
            reqCouponList().then((res) => {
                this.couponList = res.data
                this.loading = false
            }).catch((error) => {
                this.loading = false
                this.$message.error(error.message)
            })
        },
        submit(id) {
            this.loading = true;
            reqCouponPost(id).then((res) => {
                this.loading = false;
                if (res.message != "抢购成功") {
                    this.$message.error(res.message);
                } else {
                    this.$message.success(res.message);
                    this.getCouponList();
                }
            }).catch((error) => {
                this.loading = false;
                this.$message.error(error.message);
            })
        }

    },
}
</script>

<style scoped>
.coupon {
    margin: 40px 0;
}

.clearfix {
    font-size: 18px;
    font-weight: 600;
    border-left: 5px solid #409EFF;
    padding-left: 10px;
    margin-bottom: 20px;
}

.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.content .redbag {
    height: 70px;
    background-color: red;
    color: white;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn {
    text-align: center;
}

.desc {
    font-size: 12px;
}

.time {
    font-size: 12px;
    color: gray;
    margin-bottom: 5px;
}
</style>